<!-- 小区公告 -->
<template>
	<view>
		<!-- 骨架屏 -->
		<view :class="hasNet ? 'no-warpper':''" v-if="!isLong">
			<view class="nl-shadow-box nl-box-padding u-skeleton" v-if="hasNet">
				<view class="user">
					<view class="left">
						<view class="img u-skeleton-circle">
						</view>
						<view class="name">
							<view class="u-skeleton-rect">000</view>
							<text class="u-skeleton-rect">000</text>
						</view>
					</view>
					<view class="button u-skeleton-rect"><button>查看</button></view>
				</view>
				<view class="content-box">
					<view class="img">
					</view>
					<view class="content">
						<view class="title u-skeleton-rect nl-margin-bottom-md"></view>
						<view class="text u-skeleton-rect"></view>
					</view>
				</view>
			</view>

			<!-- 网络错误 -->
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>

		<view class="no-warpper" v-else-if="isLong">
			<view v-if="hasInfo">
				<view class="scroll-box">
					<view class="nl-shadow-box nl-box-padding"
						v-if="userCommunity.communityId !== null || userCommunity.communityId !== undefined ||  userCommunity.communityId !== ''"
						v-for="(item,index) in noticesList" :key='index' @click="goDetails(item)">
						<view class="user">
							<view class="left">
								<view class="img">
									<image :src="item.headPortrait" />
								</view>
								<view class="name">
									<view>{{item.userName}}</view>
									<text>{{item.createTime}}</text>
								</view>
							</view>
							<view class="button"><button>查看</button></view>
						</view>
						<view class="content-box">
							<view class="img">
								<image :src="item.img" mode="aspectFit" />
							</view>
							<view class="content">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.text}}</view>
							</view>
						</view>
					</view>
					<!-- 加载动画 -->
					<u-loadmore :status="status" />
				</view>
			</view>
			<!-- 暂无数据 -->
			<view class="nl-shadow-box" v-else>
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>
		<!--引用组件-->
		<u-skeleton v-if="hasNet" :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {
		getNotices
	} from '@/api/notices.js'; // 小区公告接口
	import {
		mapState
	} from 'vuex';
	import {
		IMG_URL
	} from '@/utils/request.js'

	import {
		removeTAG
	} from '@/utils/StringUtil.js'
	export default {
		components: {},
		data() {
			return {
				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: false, // 是否有数据
				noDataText: '暂无信息',

				noticesList: [], //公告列表
				loading: true,
				status: 'loadmore',
				page: 1, //当前页码
				records: 0 //总页码
			}
		},
		onLoad() {
			this.getNotices(this.page)
		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.noticesList = []
			this.page = 1
			this.records = 0
			this.getNotices(1)
		},
		// 上拉加载
		onReachBottom() {
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发

			} else {
				this.status = 'loading';
				if (this.page <= this.records) {
					this.getNotices(this.page)
				} else {
					this.status = 'nomore';
				}
			}
		},
		methods: {
			// 跳转详情页
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/home/noticeDetails/noticeDetails?noticeId=' + item.noticeId
				})
			},
			/**
			 * 获取公告列表
			 */ 
			getNotices(page) {
				this.page = page
				var data = {
					communityId: this.userCommunity.communityId,
					page: page,
					row: '5',
					noticeTypeCd: '1001'
				}
				var that = this
				getNotices(data).then((res) => {
					that.records = res.records
					uni.stopPullDownRefresh();
					if (res.notices.length == 0) {
						that.status = 'nomore';
						that.hasInfo = false
						that.isLong = true;
						that.loading = false
						return;
					}
					if (that.records == that.page) {
						that.status = 'nomore';
					} else {
						that.status = 'loadmore'
					}
					that.page++
					for (let i = 0; i < res.notices.length; i++) {
						that.noticesList.push(res.notices[i])
					}
					// 因后端未返回发布人的名字和头像，暂使用默认
					for (let i in that.noticesList) {
						that.noticesList[i].headPortrait = '../../../static/portrait.png'

						if (that.noticesList[i].photo !== undefined) {
							that.noticesList[i].img = IMG_URL + that.noticesList[i].photo.url
						} else {
							// @/static/index/banner01.png
							that.noticesList[i].img = '' //默认图片
						}
						that.noticesList[i].text = removeTAG(that.noticesList[i].context) //简介
					}
					that.hasInfo = true;
					that.isLong = true;
					that.loading = false
				}).catch(function(reason) {
					// 处理网络错误
					that.hasNet = false
					that.loading = false
					that.isLong = false
				})
			},
			/**
			 * 重新刷新
			 */
			refresh() {
				this.isLong = false
				this.hasNet = true
				this.hasInfo = false
				this.getNotices(1)
			},
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		// height: 100vh;
		padding-bottom: 32rpx;
		width: 100%;
	}

	.nl-shadow-box {
		margin-bottom: 40rpx;
	}

	.nl-box-padding {
		padding: 24rpx;
	}

	.user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.left {
			display: flex;
			align-items: center;
			min-width: 68rpx;

			.img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 100rpx;
				margin-right: 16rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				flex: 1;

				view {
					width: 400rpx;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: $uni-font-size-base;
					font-weight: bold;
				}

				text {
					min-width: 100rpx;
					display: block;
					font-size: $uni-font-size-sm;
					color: $nl-text-color-auxiliary;
				}
			}
		}

		.button {
			margin-left: auto;

			button {
				width: 114rpx;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 20rpx;
				background-color: $uni-text-color-inverse;
				color: #1585FC;
				border-radius: 6rpx;
				border: none;
				font-size: $uni-font-size-sm;
				border: 2rpx solid #1585FC;
			}

			button:active {
				box-shadow: none
			}
		}
	}

	.content-box {
		height: 220rpx;
		position: relative;
		border-radius: $nl-border-radius-main;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 100%;
			min-width: 300rpx;
			padding: 20rpx;
			height: 220rpx;
			position: absolute;
			background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.75) 100%);
			left: 0;
			bottom: 0;
			display: flex;
			flex-wrap: wrap;

			.title {
				width: 100%;
				margin-top: 80rpx;
				color: #FFFFFF;
				font-size: $uni-font-size-base;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.text {
				width: 100%;
				max-height: 68rpx;
				color: #f4f4f4;
				font-size: $uni-font-size-sm;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
